<template>
  <el-container>
    <el-main>
      <el-header>
        <p>一级菜单/二级菜单/</p>
        <p>三级菜单</p>
      </el-header>
      <el-row>
        <el-col :span="24"><div class="hui" /></el-col>
      </el-row><el-row>
        <el-form :inline="true" :model="formInline" class="tt">
          <el-row>
            <el-col :span="8" align="middle">
              <el-form-item label="优惠卷名">
                <el-input v-model="formInline.user" placeholder="优惠卷名" />
              </el-form-item></el-col>
            <el-col :span="8" align="middle">
              <el-form-item label="日期">
                <el-select v-model="formInline.region" placeholder="日期">
                  <el-option label="无" value="无" />

                </el-select>
              </el-form-item></el-col>
            <el-col :span="8" align="middle">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="devSubmit">取消</el-button>
              </el-form-item></el-col>
          </el-row>
        </el-form>
      </el-row>

      <!-- 新增 -->
      <div>
        <el-button class="t" type="primary" @click="addData()">+ 新建</el-button>

        <el-dialog
          v-if="dialogVisible"
          :title="ttt"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose"
        >

          <el-form

            label-width="100px"
            :model="formDiscounts"
          >

            <el-form-item label="优惠卷名称">
              <el-select v-model="formDiscounts.name" placeholder="请选择" style="width:100%">
                <el-option label="通用优惠券" value="通用优惠券" />
              </el-select>
            </el-form-item>

            <el-form-item label="优惠卷金额">
              <el-input v-model="formDiscounts.discount_amount" placeholder="请选择" />
            </el-form-item>

            <el-form-item label="使用限制">
              <el-select v-model="formDiscounts.restrictions" placeholder="请选择" style="width:100%">
                <el-option label="无限制" value="无限制" />
              </el-select>
            </el-form-item>

            <el-form-item label="使用时效">
              <el-input v-model="formDiscounts.deadline" placeholder="请选择" />
            </el-form-item>

            <el-form-item label="账号领取限制">
              <el-input v-model="formDiscounts.get" placeholder="请选择" />
            </el-form-item>

          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="delon">取 消</el-button>
            <el-button type="primary" @click="addyouhui">确 定</el-button>
          </span>
        </el-dialog>
      </div>

      <el-table
        ref="multipleTable"
        :data="currencyData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
        />
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="discount_amount"
          label="优惠金额/元"
        />
        <el-table-column
          prop="restrictions"
          label="使用限制"
        />
        <el-table-column
          prop="deadline"
          label="使用期限"
          show-overflow-tooltip
        />
        <el-table-column
          prop="get"
          label="领取限制"

          show-overflow-tooltip
        />
        <el-table-column
          prop="released_quantity"
          label="发放数量/张"

          show-overflow-tooltip
        />
        <el-table-column
          prop="money"
          label="领取金额/元"

          show-overflow-tooltip
        />
        <el-table-column
          prop="remaining_quantity"
          label="剩余数量/张"

          show-overflow-tooltip
        />
        <el-table-column
          #default="{row}"
          prop="operation"
          label="操作"
        >
          <el-button type="text" size="mini" @click="putCurrency(row)">编辑</el-button>
          <el-button type="text" size="mini" @click="delyouhui(row.id)">删除</el-button>
        </el-table-column>

      </el-table>
      <div class="block">
        <el-pagination
          :current-page="page._page"
          :page-sizes="[10,20,30, 40]"
          :page-size="page._limit"
          :total="page.total"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </el-main>
  </el-container>
</template>

<script>
// import New from '@/components/shop/index'
import { getCurrency, getCurrencys, addCurrency, delCurrency, putCurrency, getformInline } from '@/views/currency/currency';

export default {
  data() {
    return {
      // 新建
      dialogVisible: false,
      formDiscounts: {
        name: '',
        discount_amount: '',
        restrictions: '',
        deadline: '',
        get: '',
      },

      // 查询
      formInline: {
        user: '',
        region: '',
      },
      currencyData: [
        {
          name: '',
          discount_amount: '',
          restrictions: '',
          deadline: '',
          get: '',
          released_quantity: '',
          money: '',
          remaining_quantity: '',
        },

      ],
      page: {
        total: 0,
        _page: 1, // 当前页面
        _limit: 10,
      },
    };
  },
  computed: {
    ttt() {
      return this.formDiscounts.id ? '编辑优惠券' : '新建优惠券';
    },
  },
  // 钩子
  created() {
    this.getCurrency();
    this.getCurrencys();
  },
  // 数据
  methods: {
    delon() {
      this.dialogVisible = false;
      this.formDiscounts = {
        name: '',
        discount_amount: '',
        restrictions: '',
        deadline: '',
        get: '',
      };
    },
    devSubmit() {
      this.formInline = {
        user: '',
        region: '',
      };
      this.getCurrency();
      console.log(11111);
    },
    addData() {
      this.dialogVisible = true;
    },
    // 查询
    async  onSubmit() {
      const res = await getformInline({ name: this.formInline.user });
      this.currencyData = res.data;
    },
    // 修改数据
    async putCurrency(row) {
      this.dialogVisible = true;
      this.formDiscounts = row;

      console.log(row);
      // <<<<<<< HEAD
      //       },
      //        //删除数据
      //       async delyouhui(id) {
      //       await  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //           confirmButtonText: '确定',
      //           cancelButtonText: '取消',})
      //         const res = await delCurrency(id)
      //         console.log(res);
      //           this.getCurrency()
      //         },
      //       //新增数据
      //       async addyouhui(){
      //         if(this.formDiscounts.id = null){
      //           //编辑
      //         const { data } =await putCurrency(this.formDiscounts)
      //         this.dialogVisible = false
      // =======
    },
    // 删除数据
    async delyouhui(id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消' });
      const res = await delCurrency(id);
      console.log(res);
      this.getCurrency();
    },
    // 新增数据
    async addyouhui() {
      if (this.formDiscounts.id) {
        // 编辑
        await putCurrency(this.formDiscounts);
        this.formDiscounts = {
          name: '',
          discount_amount: '',
          restrictions: '',
          deadline: '',
          get: '',
        };
        // >>>>>>> development
      } else {
        // 新增
        await addCurrency(this.formDiscounts);
      }
      this.dialogVisible = false;
      this.getCurrency();
    },
    // 新建关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.formDiscounts = {
            name: '',
            discount_amount: '',
            restrictions: '',
            deadline: '',
            get: '',
          },
          done();
        })
        .catch(_ => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 数据
    async getCurrency() {
      const { data } = await getCurrency(this.page);
      console.log(data);
      this.currencyData = data;
    },
    async getCurrencys() {
      const res = await getCurrencys();
      console.log(res);
      this.page.total = res.data.length;
      // console.log(data.length);
    },
    // async addCurrencys(){
    //   const { data } = await addCurrencys(this.)
    // },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 翻页
    // handleDelete(index, row) {
    //   console.log(index, row);
    // },
    // handleSizeChange(val) {
    //   // this.page.size = val;
    //   this.getCurrency();
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   // this.page.page = val;
    //   this.getCurrency();
    //   console.log(`当前页: ${val}`);
    // },
    handleSizeChange(val) {
      this.page._limit = val;
      this.getCurrency();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page._page = val;
      this.getCurrency();
      console.log(`当前页: ${val}`);
    },

  },
};

</script>

<style lang="scss" scoped>
.el-container {
  background-color: rgba(240, 242, 245, 1);
  height: 100%;
  width: 100%;
  .el-header {
    background-color: #fff;
    // margin-bottom: 20px;
    height: 40px !important;
    // font-size: 13px;
    p {
      float: left;
    }
  }
  .el-main {
    margin: 50px 20px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0px;
    padding-bottom: 20px;
    overflow: hidden;
    .t{
    margin-left: 1%;
}
    .el-row {
      margin-bottom: 20px;
    }
    .hui {
      width: 100%;
      // margin-top: 50px;
      height: 42px;
      background-color: rgba(240, 242, 245, 1);
    }
  }
}
</style>
